
<template>
  <div>
    <el-form-item label="周报提交周期">
      <el-select v-model="selectedOption" placeholder="请选择周报提交周期">
        <el-option
            v-for="option in options"
            :key="option.value"
            :label="option.label"
            :value="option.value">
        </el-option>
      </el-select>
    </el-form-item>

    <el-button @click="fetchDataAndGenerateText">生成文本</el-button>

    <el-alert title="提示" type="info" :closable="false">
      选择一个选项后，点击“生成文本”按钮，将生成周报模板。
    </el-alert>



    <div class="generated-text">
      <h2> {{selectedOption}} 周报模板</h2>
      <p>1.发挥推进办的纽带作用，推进试点院校、评价组织、主管部门三者之间的交流沟通，积极认真解答和协调各院校、培训评价组织、证书联盟协作单位的各种事项，解释相关政策信息。</p>
      <p>2.受理部分试点院校指标调整以及漏报错报等问题。</p>
      <p>3.截止到本月，全省试点院校共计 {{ generatedText.schoolNum }} 所，其中公办院校 {{ generatedText.schoolGbNum }} 所，民办院校 {{ generatedText.schoolMbNum }} 所,本科院校 {{ generatedText.schoolBkNum }} 所，高职 {{ generatedText.schoolGzNum }} 所，中职 {{ generatedText.schoolZzNum }} 所。</p>
      <p>4.截止到本月，全省试点院校证书考核申报人次共计 {{ generatedText.stuNum }} 人次，其中已通过 {{ generatedText.passNum }} 人次，未通过 {{ generatedText.failNum }} 人次，其余为待考或成绩登记中状态。</p>

    </div>
  </div>
</template>

<script setup>import { ref, onMounted } from 'vue'
import axios from 'axios'

// 定义选项
const options = [
  { value: '', label: '' },
  { value: '2024年6月下半月', label: '2024年6月下半月' },
  { value: '2024年6月上半月', label: '2024年6月上半月' },
  { value: '2024年5月下半月', label: '2024年5月下半月' },
  { value: '2024年5月上半月', label: '2024年5月上半月' }
]

// 选中的选项
const selectedOption = ref('')

// 生成的文本
const  generatedText = ref({})

// 模拟后端接口数据
const fetchData = async (option) => {
  try {
   // const response = await axios.get(`/public/json/${option}`)
    const response = await axios.get(`/public/json/report.json`)
    return response.data
  } catch (error) {
    console.error('Error fetching data:', error)
    return null
  }
}

// 生成文本
const fetchDataAndGenerateText = async () => {
  if (!selectedOption.value) {
    alert('请选择一个选项！')
    return
  }

  const data = await fetchData(selectedOption.value)


  if (data) {
    generatedText.value = {
      schoolNum: '230',
      schoolGbNum: '187',
      schoolMbNum: '43',
      schoolBkNum: '24',
      schoolGzNum: '67',
      schoolZzNum: '139',
      stuNum: '72753',
      passNum: '46353',
      failNum: '7437',
    }
  }
}

// 设置样式
const style = `  .generated-text {
    margin-top: 20px;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
  }`
document.head.insertAdjacentHTML('beforeend', `<style>${style}</style>`)

onMounted(() => {
  // 初始化 Kendo UI 许可证
  // window.kendo.licenseKey = 'xxx-yyyy-zzzzzzzzzzzzzz'
})
</script>